import React, { Component } from 'react'
import { Input, Form, Select, Avatar, Radio, Button } from 'antd'
import aimg from "@/imger/phone.jfif"
import { SPIav } from '../../utils/api';



const layout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 12 },
};


export default class thressOne extends Component {
    state = {
        ava: null
    }
    upLoadFile = () => {
        this.file.click();
    }
    fileChange = () => {
        const file = this.file.files[0];
        const data = new FormData();
        data.append("avatar", file);
        SPIav(data)
            .then(res => {
                if (res.type) {
                    //  此处逻辑较为复杂,谨慎处理
                    this.setState({
                        ava: res.avatar.replace(/public/, "http://localhost:5300")
                    })
                }
            })
    }
    render() {
        return (
            <div>
                <Form
                    {...layout}
                    name="basic"
                    initialValues={{ remember: true }}

                >

                    <Form.Item
                        label="食品种类"
                        name="title"
                        rules={[
                            { required: true, message: '请选择' }
                        ]}
                    >
                        <Select placeholder='请选择'>
                            <Select.Option value="蔬菜水果类" >蔬菜水果类</Select.Option>
                            <Select.Option value="动物性食物" >动物性食物</Select.Option>
                            <Select.Option value="纯能量食物" >纯能量食物</Select.Option>
                        </Select>

                    </Form.Item>
                    <Form.Item
                        label="食品名称"
                        name="no"
                        rules={[
                            { required: true, message: '请输入菜名' }
                        ]}
                    >
                        <Input
                            placeholder="请输入菜名"
                        />
                    </Form.Item>
                    <Form.Item
                        label="食品活动"
                        name="heh"

                    >
                        <Input
                            placeholder="聚划算"
                        />
                    </Form.Item>

                    <Form.Item
                        label="食品描述"
                        name="buk"

                    >
                        <Input.TextArea
                            style={{ height: "90px" }}
                            placeholder="请描述菜品"
                        />
                    </Form.Item>
                    < Form.Item label="餐馆照片" >
                        <input type="file" onChange={this.fileChange} ref={el => this.file = el} style={{ display: 'none' }} className="fileinp" />
                        <Avatar shape='square' onClick={this.upLoadFile} style={{ cursor: 'pointer', border: 'none' }} size={160} src={this.state.ava ? this.state.ava : aimg} />
                    </Form.Item>



                    <Form.Item
                        label="食品特点"
                        name="bdsad"
                    >
                        {/* <Input
                            placeholder="输入公告标题"
                        /> */}
                        <Radio.Group defaultValue='单选' >

                            <Radio value="单选" style={{ lineHeight: '32px' }}>
                                单选
                                    </Radio>


                            <Radio value="多选" style={{ lineHeight: '32px' }}>
                                多选
                                    </Radio>


                        </Radio.Group>
                    </Form.Item>

                    <Form.Item
                        label="食品规格"
                        name="jn"
                    >
                        <Input
                            placeholder="输入公告标题"
                        />
                    </Form.Item>
                    <Form.Item 
                    {...layout}
                    >
                      <Button type="primary" onClick={this.forMycg} htmlType="submit" >
                        确认注册店铺
                      </Button>
                    </Form.Item>
                </Form>
                
            </div >
         
        )
    }
}
